//请求开发环境的服务器的axios实例
import axios from 'axios'

//引入vuex
import store from '@/store/index'

//引入进度条
import nProgress from 'nprogress';
import 'nprogress/nprogress.css'

//创建一个实例
const request = axios.create({
    baseURL: process.env.VUE_APP_API,
    timeout: 10000,
})

//给实例配置拦截器
request.interceptors.request.use(
    //请求拦截器回调函数
    (config) => {
        //发送请求触发进度条
        nProgress.start()


        //config:是axios请求的配置对象
        // console.log(config);
        //每次发送请求的时候,在header中携带用户的临时标识
        const userTempId = store.state.user
        config.headers.userTempId = userTempId

        //每次发送请求的时候,在header中携带token
        const token = store.state.user.token;
        config.headers.token = token;

        //拦截器中逻辑完成后,必须把config配置对象再返回出去,否则请求无法继续进行
        return config
    },
    //进入处理失败的回调函数有两种方法:1请求拦截器可以设置多个,当上一次失败就会进入这个的失败函数  2.给拦截器传入额外的参数,主动进入
    (error) => {
        //触发响应以后,进度条结束
        nProgress.done()


        //如果拦截器错误的请求下,我们要返回一个失败的promise实例
        //为什么要返回失败的promise实例????? 因为拦截器最终的返回是通过then方式返回的,then或catch只有返回失败的promise实例的时候,then或者catch才是失败状态,axios才能告诉我们失败了
        return Promise.reject(error.message)
    })


request.interceptors.response.use(
    (response) => {
        //触发响应以后,进度条结束
        nProgress.done()



        //response是请求回来axios数据,其中data属性是服务端响应的数据
        // console.log(response);
        //我们一定要在响应拦截器中返回一个数据,否则axios方法无法得到数据

        if (response.data.code === 200) {
            return response.data.data
        } else {
            //自己封装一个错误对象
            return Promise.reject({
                message: response.data.message
            })
        }
    },
    (error) => {
        //触发响应以后,进度条结束
        nProgress.done()


        //当响应失败,则处理失败情况,要返回失败的promise实例
        return Promise.reject(error.message)
    })


export default request